<template>
    <div class="page dealEmergencyApply-page" data-page="examResult" >
        <div class="link-page-nav">
            <span class="link" @click=goIndex()>
                <i class=" iconfont icon-APPicon_guanbi" style="font-size: 16px;"></i>
            </span>
        </div>
        <div class="link-page-top" style="padding-bottom: 17px;">
            <div class="link-page-title">得分
                <p class="result-name">考试名称考试名称考试名称考试名称</p>
                <!-- <div style="float: right;text-align: center; ">
                    <i class="iconfont icon-fenxiang-" @click="goHistoryLists"></i>
                </div> -->
            </div>
        </div>
        <div class="page-content">
            <div class="exam-content">
                <div class="exam-details" id="exam-result_{{getNewId}}">


                </div>
                <div class="tip">
                    <p>注意</p>
                    <p class="tip-msg">·于本场考试结束时间【考试结束时间XXXX】后，您可以 在考试记录中查看考试答案</p>
                    <p>.本场考试暂未结束，您的排名可能有变化。</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    return {
        data() {
            return {
                getNewId: (new Date()).getTime(),
                pageName:'examResult'
            }
        },
        mounted() {
            let u = navigator.userAgent;
            let self = this
            let params = { examDetailId: this.$route.params.id }
            let timej;
            let detailEndTime ;
            let maxtime 
            Dao.getExamDetailById(params, function (res) {
                if(!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){
                         dateNow = new Date(res.detailBeginTime.replace(/-/g, '/'));
                         detailEndTime = new Date(res.detailEndTime.replace(/-/g, '/'))
                         timej=detailEndTime.getTime() - dateNow.getTime()
                         maxtime = Math.abs(timej) / 1000;
                        
                }else{
                     dateNow = new Date(res.detailBeginTime);
                     detailEndTime = new Date(res.detailEndTime)
                     timej=detailEndTime.getTime() - dateNow.getTime()
                     maxtime = Math.abs(timej) / 1000;
                }
                // 倒计时
                var minute = parseInt(maxtime / 60);
                var second = parseInt(maxtime % 60);
                jQuery('.tip-msg').text(`·于本场考试结束时间【考试结束时间${res.detailEndTime}】后，您可以 在考试记录中查看考试答案`)
                jQuery('.result-name').text(res.name)
                jQuery(`#exam-result_${self.getNewId}`).append(
                    ` <img src="${userInfor.headUrl == '' ? staticPath + 'img/mine/defaulticon.png' : userInfor.headUrl}" alt="">
                    <p class="exam-name">${userInfor.name}</p>
                    <div class="exam-total ${res.passLine <= res.score?'passcolor':'nopasscolor'}"><span>${res.score}</span>分</div>
                    <div class="exam-result">
                        <div><p>考试用时</p>
                            <p>${(minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second)}</p>
                            
                        </div>
                        <div><p>考试结果</p>
                            <p class="${res.passLine <= res.score?'passcolor':'nopasscolor'}">${res.score >= res.passLine ? '及格' : '不及格'}</p>
                        </div>
                        <div id="resultGoRanking"> <p>考试排名</p>
                            <p>${res.ranking}></p>
                           
                        </div>
                    </div>`
                )
                let examId = res.examId
                jQuery(`#exam-result_${self.getNewId}`).on('click', '#resultGoRanking', function () {
                    app.router.navigate(`/rankingList/${examId}`);
                })
            })

        },
        methods: {
            goIndex: function () {
                app.view.current.router.back('/exam/',{force:true})
            }
        },
    }
</script>
<style scoped>
    .exam-content {
        padding: 20px;
    }

    .link {
        color: #000000;
        font-size: 30px;
    }

    .link-page-title p {
        font-size: 16px;
        ;
    }
    .passcolor{
    color: #69BA71!important;
}
.nopasscolor{
    color: #E07762!important;
}
    .exam-details {
        background-color: #fff;
        border: 1px solid rgba(225, 225, 225, 0.9);
        box-shadow: 0px 1px 10px 0px rgba(181, 200, 206, 0.5);
        border-radius: 6px;
        text-align: center;
        padding: 20px;
    }

    .exam-details img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }

    .exam-result {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .exam-total {
        margin: 30px 0 30px;
        background: url(./img/answer.png) no-repeat;
        height: 99px;
        background-size: contain;
        line-height: 99px;
        font-size: 16px;
    }

    .exam-total span {
        font-size: 44px;
    }
    .exam-typename {
        margin: 30px 0;
    }

    .tip {
        color: rgba(255, 255, 255, 1);
        font-size: 14px;
        margin-top: 20px;
    }

    .exam-name {
        border-bottom: 1px solid #E1E1E1;
        margin: 0 -20px;
        font-weight: bold;
        font-size: 16px;
        padding-bottom: 20px;
    }
</style>